<%@ page session="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=no"
	charset="utf-8" />
<link rel="stylesheet" href="../resources/css/bootstrap.css"></link>
<link rel="stylesheet" href="../resources/css/bootstrap-fileupload.css"></link>
<link rel="stylesheet"
	href="../resources/css/ui-lightness/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" href="../resources/css/style.css">
<link rel="stylesheet" href="../resources/css/jquery.fancybox.css?v=2.1.5"
	type="text/css" media="screen" />
<script src="../resources/js/model/AppController.js"></script>
<script src="../resources/js/model/Comment.js"></script>
<script src="../resources/js/model/User.js"></script>
<script src="../resources/js/model/Blog.js"></script>
<script src="../resources/js/model/Room.js"></script>
<title>Timeline</title>
<script
	src="http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js?bundle=true"
	type="text/javascript"></script>
<script>
	var app;
	var timeline_data = { // save as a global variable
		'dateTimeFormat' : 'iso8601',

		'events' : [ {
			'start' : "2013-11-22T19:22:45.198Z",
			'title' : 'Barfusserkirche',
			'description' : 'by Lyonel Feininger, American/German Painter, 1871-1956',
			'image' : 'http://images.allposters.com/images/AWI/NR096_b.jpg',
			'link' : 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm'
		} ]
	};
	var timeline_data2 = { // save as a global variable
		'dateTimeFormat' : 'iso8601',

		'events' : [ {
			'start' : "2013-11-23T19:22:45.198Z",
			'title' : 'derfred',
			'description' : 'by Lyonel Feininger, American/German Painter, 1871-1956',
			'image' : 'http://images.allposters.com/images/AWI/NR096_b.jpg',
			'link' : 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm'
		} ]
	};
	var tl;
	function onLoad() {
		var eventSource = new Timeline.DefaultEventSource();
		var theme1 = Timeline.ClassicTheme.create();
		theme1.autoWidth = true; // Set the Timeline's "width" automatically.
		// Set autoWidth on the Timeline's first band's theme,
		// will affect all bands.
		/*  theme1.timeline_start = new Date(Date.UTC(1890, 0, 1));
		 theme1.timeline_stop  = new Date(Date.UTC(2160, 0, 1)); */

		var bandInfos = [ Timeline.createBandInfo({
			eventSource : eventSource,
			width : "80%",
			intervalUnit : Timeline.DateTime.DAY,
			intervalPixels : 100,
			theme : theme1,
			timeZone : -3
		}), Timeline.createBandInfo({
			eventSource : eventSource,
			width : "10%",
			intervalUnit : Timeline.DateTime.MONTH,
			intervalPixels : 300,
			theme : theme1,
			timeZone : -3,
			overview : true
		}), Timeline.createBandInfo({
			width : "10%",
			eventSource : eventSource,
			intervalUnit : Timeline.DateTime.YEAR,
			intervalPixels : 400,
			theme : theme1,
			timeZone : -3,
			overview : true
		}) ];
		bandInfos[1].syncWith = 0;
		bandInfos[1].highlight = true;
		bandInfos[2].syncWith = 0;
		bandInfos[2].highlight = true;

		tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
		/* var app = new AppController();
		app.init(); */
		var url = '.'; // The base url for image, icon and background image
		// references in the data
		/* 	eventSource.loadJSON(timeline_data, url);
			
			eventSource.loadJSON(timeline_data2, url);
			tl.layout(); */
		tl.layout();
		app = new AppController(eventSource);
		app.init();

	}

	var resizeTimerID = null;
	function onResize() {
		if (resizeTimerID == null) {
			resizeTimerID = window.setTimeout(function() {
				resizeTimerID = null;
				tl.layout();
			}, 500);
		}
	}

	var oldFillInfoBubble = Timeline.DefaultEventSource.Event.prototype.fillInfoBubble;
	Timeline.DefaultEventSource.Event.prototype.fillInfoBubble = function(elmt,
			theme, labeller) {
		app.currentRoom.select(this.getProperty('blogId'));

		return false;
	}
</script>
<style>
.simileAjax-bubble-container {
	display: none;
}
</style>
</head>
<script src="../resources/js/jquery-1.10.2.js"></script>
<script src="../resources/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript"
	src="../resources/js/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript"
	src="../resources/js/jquery.fancybox.pack.js?v=2.1.5"></script>
<script src="../resources/js/bootstrap.min.js"></script>
<script src="../resources/js/bootstrap-fileupload.min.js"></script>
<script type="text/javascript" src="../resources/js/jquery.json-2.3.min.js"></script>
<script type="text/javascript"
	src="/CoupledObjectWebServer/resources/js/sync.js"></script>
<body onload="onLoad();" onresize="onResize();">
	<div id="my-timeline" style="height: 300px; border: 1px solid #aaa"></div>

</body>
</html>